在计算机图形学中，我们区分 矢量 和 位图 图形。矢量图形（如SVG）通过逻辑形状描述图像；每个元素都是DOM中的持久对象。相反，位图图形（如HTML5 Canvas）则处理 彩色像素点阵。
1. 过渡到Canvas
虽然SVG更容易通过CSS进行样式设置，但浏览器必须追踪每一个节点。对于高性能需求，如包含数千个移动部件的游戏，Canvas API更为优越。它提供了一个单一的DOM元素来封装绘图表面——本质上是一张“空白画布”。
2. 绘图上下文
该 <canvas> 元素在初始化其 上下文之前是一个“黑箱”。该对象的方法提供了实际的绘图接口，将显示元素与渲染逻辑解耦。
var context = canvas.getContext("2d");
3. 命名空间意识
在基于XML的图形（如SVG）中， xmlns="http://www.w3.org/2000/svg" 属性至关重要。它向浏览器发出信号，从标准的HTML解析切换到特定的图形模式，使形状标签能被识别为可交互的对象。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What is the primary difference between Vector and Bitmap graphics?
Vector uses pixel data; Bitmap uses logical shapes.
Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.
Vector is always faster for game rendering.
Bitmap elements remain persistent in the DOM.
✅ Correct!
Correct! Vector graphics describe 'what' a shape is, while bitmaps describe 'what color' each pixel is.❌ Incorrect
Think about the DOM: SVG elements are actual tags (logical), whereas Canvas is just a grid of pixels (rasters).QUESTION 2
What is the purpose of the
xmlns attribute in an SVG tag?To define the width and height of the viewport.
To link an external CSS stylesheet.
To change the element to a different XML namespace for specific schema recognition.
To enable hardware acceleration for bitmap rendering.
✅ Correct!
Exactly. Without the namespace, the browser would treat tags like <circle> as unknown HTML tags.❌ Incorrect
XML namespaces (xmlns) are used to identify which schema the browser should use to interpret the tags.QUESTION 3
How do you access the drawing interface for an HTML5 Canvas?
By modifying the .style.color property of the canvas.
By calling the getContext('2d') method on the canvas element.
By inserting SVG tags inside the <canvas> tags.
By using the document.draw() global function.
✅ Correct!
The context object is the gateway to all imperative drawing methods.❌ Incorrect
The canvas itself is just a container; the 'context' provides the methods like fillRect().QUESTION 4
Why does a dashboard with 10,000 data points run faster on Canvas than SVG?
Canvas uses fewer DOM nodes, reducing browser tracking overhead.
Canvas allows for better CSS styling of individual bars.
SVG cannot handle color hex codes.
Canvas automatically deletes old frames.
✅ Correct!
Correct. 10,000 SVG nodes would bloat the DOM, while Canvas only has one node regardless of the number of shapes drawn.❌ Incorrect
Every SVG shape is a DOM object the browser must maintain. Canvas only maintains pixel data.QUESTION 5
Once a shape is drawn to a Canvas, what happens to its 'identity'?
It can be selected and moved via standard DOM queries.
It is stored as a persistent object in the browser memory.
It becomes part of the pixel raster and loses its individual identity.
It is automatically converted to an SVG path.
✅ Correct!
Yes. After drawing, the canvas only knows 'these pixels are red'; it doesn't know 'this is a circle'.❌ Incorrect
Unlike SVG, Canvas is imperative. Once drawn, the 'shape' is just colored pixels.Case Study: EconomicCorp Data Visualization
Optimizing a High-Density Financial Dashboard
EconomicCorp needs a real-time ticker that displays 5,000 trade entries per minute. Initially, they used SVG, but the browser freezes as the trading day progresses. You are tasked with migrating the rendering logic to Canvas to maintain 60 FPS.
Q
Identify the primary architectural flaw in using SVG for a 5,000-node real-time ticker.
Solution:
The flaw is 'DOM Bloat.' Every SVG element is a persistent DOM object. Tracking 5,000+ objects with frequent updates forces the browser to perform expensive layout and reflow calculations every frame, leading to CPU exhaustion.
The flaw is 'DOM Bloat.' Every SVG element is a persistent DOM object. Tracking 5,000+ objects with frequent updates forces the browser to perform expensive layout and reflow calculations every frame, leading to CPU exhaustion.
Q
Describe how the 'Context' object simplifies the rendering of these 5,000 items.
Solution:
By using getContext('2d'), the developer can iterate through the trade data and call context.fillRect() or context.lineTo() directly. This draws pixels into a single buffer. The browser only manages one DOM element (the canvas), significantly reducing memory overhead.
By using getContext('2d'), the developer can iterate through the trade data and call context.fillRect() or context.lineTo() directly. This draws pixels into a single buffer. The browser only manages one DOM element (the canvas), significantly reducing memory overhead.
Q
If a user wants to click on a specific trade bar to see details, which rendering method (SVG or Canvas) makes 'Hit Detection' easier and why?
Solution:
SVG makes hit detection easier because every bar is a DOM element that supports standard event listeners (onclick). In Canvas, since the bar is just pixels, the developer must manually calculate if the mouse coordinates intersect with the area where the bar was drawn.
SVG makes hit detection easier because every bar is a DOM element that supports standard event listeners (onclick). In Canvas, since the bar is just pixels, the developer must manually calculate if the mouse coordinates intersect with the area where the bar was drawn.